<template>
	<div :class="ns.b('table-img')">
		<el-image :preview-teleported="true" :class="ns.be('table-img', 'el')" v-bind="$attrs" :fit="fit"
			:preview-src-list="checkImgValType(value as string)"
			:src="checkImgValType(value as string).length ? checkImgValType(value as string)[0] : ''">
			<template #error>
				<div :class="ns.b('image-slot')">
					<el-icon>
						<Picture />
					</el-icon>
				</div>
			</template>
		</el-image>
	</div>
</template>
<script lang="ts">
import { useNamespace } from "@/hooks";
import { Picture } from "@element-plus/icons-vue";
import { defineComponent, PropType } from "vue";
export default defineComponent({
	name: "TableImage",
	components: { Picture },
	props: {
		value: {
			type: [String, Number, Object, Array],
			default: "",
		},
		fit: {
			type: String as PropType<"fill" | "contain" | "cover" | "none" | "scale-down">,
			default: "cover",
		},
	},
	setup() {

		const checkImgValType = (val: string | Array<string>) => {
			if (!val) return [];
			if (val instanceof Array) {
				return val;
			} else {
				return [val];
			}
		};
		const ns = useNamespace("table-image");
		return {
			ns,
			checkImgValType,
		};
	},
});
</script>
<style lang="scss" scoped>
$ns: table-image;

@include block(#{$ns}-table-img) {
	width: 95%;
	height: 100%;
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	max-height: 100px;

	:deep(.el-image__inner) {
		min-width: 160px;
		max-width: 260px;
		min-height: 90px;
		max-height: 146px;
	}

	@include element(el) {}
}

@include block(#{$ns}-image-slot) {
	font-size: 60px;
}

:deep(.el-image__wrapper) {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
